<pre class="docs-method-signature"><code>element.transition(path, value [, opt])</code></pre>

<p>Allows to change the element's property gradually over a period of time. This method lets you specify what property to change (<code>path</code>), when the transition will start (<code>options.delay</code>), how long the transition will last (<code>options.duration</code>), how the transition will run (<code>options.timingFunction</code>), and how to interpolate the property value (<code>options.valueFunction</code>).</p>

<pre><code>element.transition('position/x', 250, {
    delay: 100,
    duration: 500,
    timingFunction: function(t) { return t*t; },
    valueFunction: function(a, b) { return function(t) { return a + (b - a) * t }}
});
// will start changing the element's x-coordinate in 100ms, for period of 500ms.</code></pre>

<p>JointJS comes pre-built with some common timing and interpolating functions. The timing functions are defined in the <code>joint.util.timing</code> namespace and the interpolating functions in the <code>joint.util.interpolate</code> namespace. The predefined timing functions are:</p>

<ul>
    <li><code>linear</code></li>
    <li><code>quad</code></li>
    <li><code>cubic</code></li>
    <li><code>inout</code></li>
    <li><code>exponential</code></li>
    <li><code>bounce</code></li>
</ul>

<p>and the predefined interpolating functions are:</p>
<ul>
    <li><code>number</code></li>
    <li><code>object</code></li>
    <li><code>hexColor</code></li>
    <li><code>unit</code></li>
</ul></p>

<pre><code>element.transition('attrs/text/font-size', '1em', { 
    valueFunction: joint.util.interpolate.unit,
    timingFunction: joint.util.timing.bounce
});
// will start changing the current font size value to 1em in the bounce fashion.</code></pre>
